<template>
  <el-tag v-for="(item, index) in arr"
          :disable-transitions="true"
          :key="item.id"
          :index="index"
          :hit="false"
          type="info"
          style="margin: 0 2px;"
          effect="light">{{ item.label }}</el-tag>
</template>

<script setup>
import {computed} from "vue";
import {isNullOrUndefined} from "@/config/common";

const props = defineProps({
  foreignList: {
    type: Array,
    required: true,
    default: null,
  },
  foreignIds: [Number, String, Array],
  foreignLabel: {
    type: [String, Array],
    required: true,
  },
})

const arr = computed(() => {
  if (isNullOrUndefined(props.foreignIds)) {
    return []
  }
  const foreignIdArr = props.foreignIds.split(',')
  return props.foreignList.filter(item => {
    return foreignIdArr.includes(item.id);
  }).map(item => {
    if (Array.isArray(props.foreignLabel)) {
      item.label = props.foreignLabel.map(m => item[m]).join(" - ");
      return item;
    }
    item.label = item[props.foreignLabel]
    return item
  })
})
</script>
